<template>
  <div class="dingdan">
    <div class="top">
      <i class="iconfont icon-fanhui fanhui" @click="back"></i>
      <span class="title">订单</span>
    </div>
    <div class="nav">
      <div class="nav-item" v-for="(item,index) in navList">
        <span :class="item === selectedNav?'selected':''" @click="changeNav(index)">{{item}}</span>
      </div>
    </div>
    <div class="quanbu" v-if="selectedNav === '全部'">

      <div class="order-container" v-for="(item,index) in orderList">
        <div class="order-img">
          <img :src="item.img" />
        </div>
        <div class="order-text">
          <div class="title">{{item.title}}</div>
          <div class="desc">{{item.desc}}</div>
          <div class="price">￥{{item.price}}</div>
        </div>
      </div>
    </div>

    <div class="daizhifu" v-if="selectedNav === '待支付'">
       <div class="order-container" v-for="(item,index) in orderList1">
        <div class="order-img">
          <img :src="item.img" />
        </div>
        <div class="order-text">
          <div class="title">{{item.title}}</div>
          <div class="desc">{{item.desc}}</div>
          <div class="price">￥{{item.price}}</div>
        </div>
      </div>
    </div>
    <div class="daishouke" v-if="selectedNav === '待授课'">
       <div class="order-container" v-for="(item,index) in orderList2">
        <div class="order-img">
          <img :src="item.img" />
        </div>
        <div class="order-text">
          <div class="title">{{item.title}}</div>
          <div class="desc">{{item.desc}}</div>
          <div class="price">￥{{item.price}}</div>
        </div>
      </div>
    </div>
    <div class="yijieshu" v-if="selectedNav === '已结束'">
        <div class="order-container" v-for="(item,index) in orderList3">
        <div class="order-img">
          <img :src="item.img" />
        </div>
        <div class="order-text">
          <div class="title">{{item.title}}</div>
          <div class="desc">{{item.desc}}</div>
          <div class="price">￥{{item.price}}</div>
        </div>
      </div>
    </div>
    <input type="button" value="找老师" class="submit">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        navList: ['全部', '待支付', '待授课', '已结束'],
        selectedNav: '全部',
        orderList: [{
          id: 1,
          img: require("../static/img/detail.png"),
          title: "阳光家教",
          desc: "广州大学华软软件学院",
          price: "50"
        }],
        orderList1: [{
          id: 1,
          img: require("../static/img/机构1.png"),
          title: "阳光家教",
          desc: "广州大学华软软件学院",
          price: "230"
        }],
        orderList2: [{
          id: 1,
          img: require("../static/img/detail.png"),
          title: "阳光家教",
          desc: "广州大学华软软件学院",
          price: "120"
        }],
        orderList3: [{
          id: 1,
          img: require("../static/img/teacher.png"),
          title: "阳光家教",
          desc: "广州大学华软软件学院",
          price: "90"
        }]
      }
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      changeNav(index) {
        this.selectedNav = this.navList[index]
      }
    }
  }

</script>

<style scoped>
  .top {
    display: flex;
    align-items: center;
    padding: 10px 0;
  }
  
  .top .fanhui {
    flex: 0 0 25px;
    color: #ccc;
    font-weight: bold;
    margin-left: 15px;
  }
  
  .top .title {
    flex: 1;
    text-align: center;
    margin-left: -15px;
  }
  
  .nav {
    display: flex;
    text-align: center;
  }
  
  .nav .nav-item {
    flex: 1;
    display: inline-block;
  }
  
  .selected {
    border-bottom: 2px solid #06cd56;
    color: #06cd56;
    padding-bottom: 5px;
  }
  
  .submit {
    position: fixed;
    width: 150px;
    height: 45px;
    border: 0 none;
    outline: 0 none;
    background: #06cd56;
    color: #fff;
    border-radius: 25px;
    left: 50%;
    bottom: 100px;
    margin-left: -75px;
  }
  
  .order-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
  }
  
  .order-container .order-img {
    position: relative;
    flex: 0 0 40%;
    height: 100px;
    margin-right: 10px;
  }
  
  .order-container .order-img img {
    position: relative;
    width: 100%;
    height: 100%;
    margin-right: 15px;
  }
  
  .order-container .order-text {
    position: relative;
    flex: 0 0 60%;
  }
  
  .order-container .order-text .title {
    margin-bottom: 10px;
    font-size: 18px;
  }
  
  .order-container .order-text .desc {
    margin-bottom: 10px;
    font-size: 14px;
  }
  
  .order-container .order-text .price {
    margin-bottom: 10px;
    font-size: 18px;
    color: red;
  }
</style>